<template>
  <div>
    <!--    条件查询-->
    <el-form :inline="true" :model="orderQuery" class="demo-form-inline">
      <el-form-item label="支付状态">
        <el-select v-model="orderQuery.paymentStatus" placeholder="支付状态">
          <el-option label="查询全部" value=""></el-option>
          <el-option label="未支付" :value="1"></el-option>
          <el-option label="已支付" :value="2"></el-option>
          <el-option label="支付超时" :value="3"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="订单状态">
        <el-select v-model="orderQuery.status" placeholder="订单状态">
          <el-option label="查询全部" value=""></el-option>
          <el-option label="下单,待取件" :value="1"></el-option>
          <el-option label="网点自寄" :value="2"></el-option>
          <el-option label="已取件" :value="3"></el-option>
          <el-option label="网点入库,待发车" :value="4"></el-option>
          <el-option label="运输中" :value="5"></el-option>
          <el-option label="网点出库，待派送" :value="6"></el-option>
          <el-option label="派送中" :value="7"></el-option>
          <el-option label="签收(已签收 或 拒收)" :value="8"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="getOrderInfo">查询</el-button>
      </el-form-item>
    </el-form>
    <!--    数据展示-->
    <el-table :data="orderInfoTable.records"
              border style="width: 100%"
    >
      <el-table-column fixed prop="createTime" label="下单时间" width="180"/>
      <el-table-column prop="receiverName" label="收件人姓名" width="100px"/>
      <el-table-column prop="receiverPhone" label="收件人电话" width="120"/>
      <el-table-column prop="receiverAddress" label="收件人详细地址" width="130"/>
      <el-table-column prop="senderName" label="发件人姓名" width="100px"/>
      <el-table-column prop="senderPhone" label="发件人电话" width="120"/>
      <el-table-column prop="senderAddress" label="发件人详细地址" width="130px"/>
      <el-table-column prop="orderType" label="订单类型">
        <template slot-scope="scope">
          <p v-if="Number(scope.row.orderType)==1"><b>同城订单</b></p>
          <p v-if="Number(scope.row.orderType)==2"><b>城际订单</b></p>
        </template>
      </el-table-column>

      <el-table-column prop="pickupType" label="取件类型">
        <template slot-scope="scope">
          <p v-if="Number(scope.row.pickupType)==1"><b>网点自寄</b></p>
          <p v-if="Number(scope.row.pickupType)==2"><b>上门取件</b></p>
        </template>
      </el-table-column>

      <el-table-column prop="paymentMethod" label="付款方式">
        <template slot-scope="scope">
          <p v-if="Number(scope.row.paymentMethod)==1"><b>预结</b></p>
          <p v-if="Number(scope.row.paymentMethod)==2"><b>到付</b></p>
        </template>
      </el-table-column>

      <el-table-column prop="paymentStatus" label="付款状态">
        <template slot-scope="scope">
          <p v-if="Number(scope.row.paymentStatus)==1"><b>未付</b></p>
          <p v-if="Number(scope.row.paymentStatus)==2"><b>已付</b></p>
          <p v-if="Number(scope.row.paymentStatus)==3"><b>超时</b></p>
        </template>
      </el-table-column>

      <el-table-column prop="amount" label="金额"/>
      <el-table-column prop="estimatedArrivalTime" label="预计到达时间" width="180"/>
      <el-table-column prop="distance" label="距离(公里)" width="120"/>
      <el-table-column prop="status" label="付款状态" width="130">
        <template slot-scope="scope">
          <p v-if="Number(scope.row.status)==1"><b>下单,待取件</b></p>
          <p v-if="Number(scope.row.status)==2"><b>网点自寄</b></p>
          <p v-if="Number(scope.row.status)==3"><b>已取件</b></p>
          <p v-if="Number(scope.row.status)==4"><b>网点入库,待发车</b></p>
          <p v-if="Number(scope.row.status)==5"><b>运输中</b></p>
          <p v-if="Number(scope.row.status)==6"><b>网点出库，待派送</b></p>
          <p v-if="Number(scope.row.status)==7"><b>派送中</b></p>
          <p v-if="Number(scope.row.status)==8"><b>签收（已签收 或 拒收）</b></p>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="120">
        <template scope="scope">
          <el-button v-if="Number(scope.row.paymentStatus)==1" size="mini" type="primary">
            <router-link :to="'/order/pay/'+scope.row.id">
              支付
            </router-link>
          </el-button>
          <el-button size="mini" type="success"
                     v-else-if="Number(scope.row.pickupType)==1&&Number(scope.row.paymentStatus)==2"
          >
            入库
          </el-button>
          <el-button v-else size="mini" type="info">
            <router-link :to="'order-details/'+scope.row.id">
              <b style="color: white">查看详情</b>
            </router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(orderInfoTable.current)"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="Number(orderInfoTable.size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(orderInfoTable.total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import order from '@/api/order/order'

export default {
  name: 'orderInfo',
  data() {
    return {
      /**
       * 订单表信息
       */
      orderInfoTable: {},
      /**
       * 订单查询对象
       */
      orderQuery: {
        status: '',//订单状态
        paymentStatus: ''//支付状态
      },
      /**
       * 页码
       */
      pageNum: 1,
      /**
       * 页数
       */
      pageSize: 5
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderInfo()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderInfo()
      console.log(`当前页: ${val}`)
    },
    getOrderInfo() {
      order.getOrderInfo(this.orderQuery, this.pageNum, this.pageSize).then(data => {
        this.orderInfoTable = data.data
      })
    }
  },
  created() {
    this.getOrderInfo()
  }
}
</script>

<style scoped>

</style>
